<style>
	.dirImg{
		cursor: pointer;
	}
</style>
<div id="venderSelectList"  xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="venderSelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="true">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content" >
                <div class="modal-body " style="padding: 0px;">
					<div class="row rowSet" style="padding: 10px 0px 0px 0px;border-bottom: 1px solid gainsboro" >
						<div class="form-group col-sm-3" style="margin-bottom: 5px;">
							<label for="spmc" class="control-label" style="text-align: right;padding-right: 5px;">厂商名称:</label>
							<input type="text"  v-model="requestDto.name"   class="col-sm-8 form-control" id="spmc" />
						</div>
						<div class="form-group col-sm-3" style="margin-bottom: 5px;">
							<label for="splx" class="control-label" style="text-align: right;padding-right: 5px;">厂商类型:</label>
							<!-- 渲染字典列表 -->
							<select   v-model="requestDto.type"  class="form-control" id="splx"  >
								<option value="null" selected>全部</option>
								<template v-for="dictItem in dicts.VenderType.list" >
									<option v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
								</template>
							</select>
						</div>
						<div class="form-group col-sm-3" align="center" >
							<label for="splx" class="control-label" style="text-align: right;padding-right: 5px;"></label>
							<button type="button" v-on:click="queryClick" class="btn btn-primary btn-block">查询</button>
						</div>
					</div><!-- /.row -->

					<!--展示的列表-->
					<div class="autoDiv" style="padding: 5px">
						<!--图片路径列表-->
						<template v-for="(item,index) in responseDtoList" style="list-style-type:none">
							<div class="panel col-sm-2 column" >
								<div class="panel-body  " style="padding: 0px; margin: 0px; "   >
									<img :src="$ImageUrl(item.imgId,'small')" class="img-thumbnail dirImg"  tabindex="0"  @dblclick="select(item)" />
								</div>
								<div class="panel-footer" style="padding: 0px; margin: 0px;">
									<span>{{item.name.length > 10 ? item.name.substring(0,10)+'...' : item.name}}</span>
								</div>
							</div>
							<template v-if="(index + 1) % 6 == 0">
								<div style="color: white"  align="center">-我是分隔符-</div>
							</template>
						</template>
					</div>
					<div style="padding: 10px;border-top: 1px solid gainsboro">
						<!--加载分页-->
						<ul class="pagination" style="margin: 0px">
							<li :class="pageNo == 1 ? 'disabled' : '' ">
								<a href="#" v-on:click="pageClick(pageNo-1)">&laquo;</a>
							</li>
							<li v-for="i in pageLength" :class="pageNo == i ? 'active' : '' ">
								<a href="#"  v-on:click="pageClick(i)">{{i}}</a>
							</li>
							<li :class="pageNo == pageLength ? 'disabled' : '' ">
								<a href="#"  v-on:click="pageClick(pageNo+1)">&raquo;</a>
							</li>
						</ul>
					</div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script>
    //采用vue
   var venderSelectList=new Vue({
        el: '#venderSelectList',
        data: {
            queryUrl:'/product/vender/getByRequestDto',
            //返回的对象列表
            responseDtoList:[],
            requestDto:{
                state:'1',//已生效的状态
			},
			dicts:{
                VenderType:{ list:[], map:new Map()},
			},
            pageNo:1,    //当前页码
            limit:10,    //每页条数
            pageLength:0, //总页数
            isSend:false //分页查询的点击状态,

        },
        methods: {
            /**
             * 图片双击选择事件
             */
            select: function (item) {
                this.selectedVender(item);//引用的文件复写这个方法就可以被调用
                $('#venderSelModal').modal('hide'); //隐藏模态框
            },
            //点击查询按钮时候
            queryClick:function(){
                this.pageNo =1;
                this.query();
            },
            //点击查询按钮时候
            query:function(){
                //对空字符串进行处理
                for(var key in this.requestDto) {
                    if (this.requestDto[key] == 'null'){
                        this.requestDto[key] = null;
                    }
                }
                console.log('query start!! ');
                var that = this;
                var url = Vue.prototype.getUrl(this.queryUrl) + '?pageNo='+this.pageNo+'&limit='+this.limit;
                console.log(JSON.stringify(this.requestDto));
                this.$send(url,this.requestDto,function(data){
                    console.log('查询成功！！');
                    that.responseDtoList = data.dataList;
                    that.pageLength = data.pageLength;
                });
            },
            /**
             * 当控件触发按钮时
             */
            pageClick: function (i) {
                this.setNowPageNo(i);
                //触发引用的控件的方法
                if(this.isSend){
                    this.isSend =false; //清除状态
                    this.query();
                }
            },
            /**
             * 根据点击的序号更新页码
             * @param i
             */
            setNowPageNo:function(i){
                if(i<1){
                    i=1;
                }else if(i>this.pageLength){
                    i = this.pageLength;

                }else if(i != this.pageNo){
                    this.isSend = true;
                }
                this.pageNo  = i ; // 设置当前页号
            },
        },
        created: function () {
            var that_ = this;
            this.$loadDicts(this.dicts,function(codeType){
                console.log(codeType + '加载完成');
			});
			this.queryClick();
        },
    });
</script>